@import "constant_value";
.chat-item{
	.qs-display();
	padding: 30rpx @padding-space;
	.logo{
		width: 84rpx;
		height: 84rpx;
		margin-right: 30rpx;
		image{
			width: 84rpx;
			height: 84rpx;
		}
	}
	.to_logo_right{
		width: 556rpx;
		.container{
			.qs-display();
			.qs-justify-content();
			.text-left{
				.qs-display();
				align-items: center;
				font-size: @qs-size;
			}
			.text-right{
				font-size: 26rpx;
				color: #999999;
			}
			image{
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		}
		.bottom-text{
			font-size: 26rpx;
			color: #999999;
			line-height: 50rpx;
		}
	}
}

.chat_header{
	.qs-display();
	.qs-justify-content(space-around);
	text-align: center;
	font-size: 26rpx;
	color: #aeaeae;
	padding: 25rpx;
	image{
		width: 44rpx;
		height: 44rpx;
	}
}

.chat_window{
	padding: 30rpx @padding-space;
	background: #f5f5f5;
	min-height: 1200rpx;
}

.chat_footer{
	position: fixed;
	bottom: 0;
	left: 0;
	background: #FFFFFF;
	padding: 20rpx @padding-space;
	width: 670rpx;
	.qs-display();
	.qs-justify-content();
	align-items: center;
	image{
		width: 44rpx;
		height: 44rpx;
		margin-right: 30rpx;
	}
	.box{
		.qs-display();
		.qs-justify-content();
		flex: 1;
		height: 60rpx;
		border: #e7e7e7 solid 1rpx;
		border-radius: 10rpx;
		overflow: hidden;
		// padding: 6rpx;
		font-size: @qs-size;
		input{
			width: 360rpx;
			height: 60rpx;
			padding: 0 8rpx;
		}
		.subbtn{
			background: #1787fb;
			color: #FFFFFF;
			width: 100rpx;
			/* #ifdef MP-WEIXIN */
			height: 60rpx;
			line-height: 60rpx;
			/* #endif */
			/* #ifndef MP-WEIXIN */
			height: 52rpx;
			line-height: 52rpx;
			margin: 4rpx;
			/* #endif */
			text-align: center;
			font-size: 30rpx;
			border-radius: 0 10rpx 10rpx 0;
		}
	}
}
.addtime{
	color: #c3c3c3;
	text-align: center;
	font-size: 28rpx;
	padding: 10rpx 0;
}
.left_chat{
	.qs-display();
	margin-bottom: 30rpx;
	image{
		width: 84rpx;
		height: 84rpx;
		margin-right: 30rpx;
		border-radius: 50%;
	}
	.bubble{
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		position: relative;
		font-size: @qs-size;
		max-width: 420rpx;
		.block{
			position: absolute;
			background: #FFFFFF;
			top: 30rpx;
			left: -8rpx;
			width: 20rpx;
			height: 20rpx;
			.qs-rota();
		}
		.showimg{
			width: 380rpx;
			height: 200rpx;
			border-radius: 0;
		}
	}
}
.right_chat{
	.qs-display();
	flex-direction:row-reverse;
	margin-bottom: 30rpx;
	image{
		width: 84rpx;
		height: 84rpx;
		margin-left: 30rpx;
		border-radius: 50%;
	}
	.bubble{
		background: #FFFFFF;
		padding: 20rpx;
		border-radius: 15rpx;
		position: relative;
		font-size: @qs-size;
		max-width: 420rpx;
		.block{
			position: absolute;
			background: #FFFFFF;
			top: 30rpx;
			right: -8rpx;
			width: 20rpx;
			height: 20rpx;
			.qs-rota();
		}
		.showimg{
			width: 380rpx;
			height: 200rpx;
			border-radius: 0;
		}
	}
	.tonow{
		font-size: 30rpx;
		width: 420rpx;
		color: #333333;
		line-height: 50rpx;
		.red{
			color: #ff5c56;
		}
		.bottom{
			color: #666666;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			line-height: 60rpx;
		}
		image{
			width: 24rpx;
			height: 24rpx;
		}
	}
}
.popline{
	background: #FFFFFF;
	line-height: 100rpx;
	border-bottom: 1rpx solid #e3e3e3;
	text-align: center;
	font-size: @qs-size;
	color: #333333;
}